<template>
  <div class="box">
    <p class="p-head">新增收货地址</p>
    <div class="item">
      <div class="item-left">联系人：</div>
      <div class="item-right">
        <input type="text" v-model="lxr" name="">
      </div>
    </div>
    <div class="item">
      <div class="item-left">选择地址：</div>
      <div class="item-right" @click="dddd()">
        <div class="dz">{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}}</div>
      </div>
    </div>
    <div class="item">
      <div class="item-left">详细地址：</div>
      <div class="item-right">
        <input type="text" v-model="xxdz" name="">
      </div>
    </div>
    <div class="item">
      <div class="item-left">联系电话：</div>
      <div class="item-right">
        <input type="text" v-model="lxdh" name="">
      </div>
    </div>
    <div class="addbtn" @click="tj()">
      提交
    </div>
    <div class="fixedbox" v-show="showbox" @click="ddddd()">
       <mt-picker :itemHeight="42" :visibleItemCount="7" :slots="myAddressSlots" @change="onMyAddressChange" @click.stop></mt-picker>
       <p style="color: #fff;">地址3级联动：{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}} 
        <br /><br /><br /><br />轻触屏幕选择完成</p>
    </div>
  </div>
</template>

<script>
// import VDistpicker from 'v-distpicker'
// import s from '@assets/json/address4.json'
import myaddress from '../assets/json/pca.json'
import qs from "qs"
import store from '@/vuex/store'
export default {
  name: 'App',
  data(){
    return{
      /*---------监听函数--------------*/
      handler:function(e){e.preventDefault();},
      myaddress,
      myAddressSlots: [
        {
          flex: 1,
          defaultIndex: 1, 
          values: Object.keys(myaddress), //省份数组
          className: 'slot1',
          textAlign: 'center'
        }, 
        {
          divider: true,
          content: '-',
          className: 'slot2'
        }, 
        {
          flex: 1,
          values: [],
          className: 'slot3',
          textAlign: 'center'
        },
        {
          divider: true,
          content: '-',
          className: 'slot4'
        },
        {
          flex: 1,
          values: [],
          className: 'slot5',
          textAlign: 'center'
        }
      ],
      myAddressProvince:'省',
      myAddressCity:'市',
      myAddresscounty:'区/县',
      showbox:false,
      xxdz:'',
      lxdh:'',
      lxr:'',
      zdz:'',
      sjlddz:'',
      adr:'',
      sheng:'',
      address:{},
    }
  },
  methods:{
    onMyAddressChange(picker, values) {
  if(myaddress[values[0]]){ //这个判断类似于v-if的效果（可以不加，但是vue会报错，很不爽）
   picker.setSlotValues(1,Object.keys(myaddress[values[0]])); // Object.keys()会返回一个数组，当前省的数组
   picker.setSlotValues(2,myaddress[values[0]][values[1]]); // 区/县数据就是一个数组
   this.myAddressProvince = values[0];
   this.myAddressCity = values[1];
   this.myAddresscounty = values[2];
  }
  },
   /*解决iphone页面层级相互影响滑动的问题*/
    closeTouch:function(){
        document.getElementsByTagName("body")[0].addEventListener('touchmove',
            this.handler,{passive:false});//阻止默认事件
        console.log("closeTouch haved happened.");
    },
    openTouch:function(){
        document.getElementsByTagName("body")[0].removeEventListener('touchmove',
            this.handler,{passive:false});//打开默认事件
        console.log("openTouch haved happened.");
    },

  dddd:function(){
    this.showbox=true
    document.body.style.height = '100vh'
    document.body.style['overflow-y'] = 'hidden'
    this.closeTouch();
  },
  ddddd:function(){
    this.showbox=false
    document.body.style.height = 'unset'
    document.body.style['overflow-y'] = 'auto'
    this.openTouch()
  },
    tj:function(){
      // this.zdz = this.xxdz+this.adr
      // this.address.list.push({
      //   name:this.lxr,
      //   tel:this.lxdh,
      //   addr:this.zdz
      // });
      console.log(this.myAddressProvince+this.myAddressCity+this.myAddresscounty+this.xxdz)
      this.$http.post("/index.php/user/address/add",qs.stringify({
          // mobile:this.tel,
          // password:this.pwd
          user_id: this.$store.state.userid,
          name: this.lxr,
          phone: this.lxdh,
          address: this.myAddressProvince+this.myAddressCity+this.myAddresscounty+this.xxdz,
          region_mergename: this.myAddressProvince

      }))
      .then(res => {
        console.log(res)
        this.zdz = ''
        this.xxdz = ''
        this.lxr = ''
        this.lxdh = ''
        this.showbox = false
        
        this.$router.go(-1)
        this.$toast({
              message: '添加成功',
              iconClass: 'icon iconfont icon-chenggong'
            });
      })
      .catch(error => {
        alert("网络错误")
      });
      
    }
  },
  created(){
    
  },
  components:{
    // VDistpicker
  },

  mounted(){
  this.$nextTick(() => { //vue里面全部加载好了再执行的函数 （类似于setTimeout）
  this.myAddressSlots[0].defaultIndex = 0 
  // 这里的值需要和 data里面 defaultIndex 的值不一样才能够初始化
  //因为我没有看过源码（我猜测是因为数据没有改变，不会触发更新）
  });
 },
 
}
</script>

<style scoped lang="less">
.box{
  margin-top: .3rem;
  .p-head{
    font-size: .26rem;
    color: #333;
  }
}
.item{
  padding: 0 .2rem;
  height: .52rem;
  margin-top: .2rem;
  .item-left{
    width: 1.4rem;
    float: left;
    height: 100%;
    line-height: .52rem;
    font-size: .22rem;
    color: #333;
    text-align: right;
  }
  .item-right{
    width: 4.4rem;
    float: right;
    height: .5rem;
    border: 0.01rem solid #d6d6d6;
    border-radius: .08rem;
    input{
      display: block;
      box-sizing: border-box;
      border: none;
      outline: none;
      text-indent: 10px;
      width: 96%;
      height: .4rem;
      margin-top: .05rem;
      font-size: .22rem;
    }
    .dz{
      width: 100%;
      height: 100%;
      line-height: .5rem;
      text-indent: 10px;
      font-size: .22rem;
      text-align: left;
    }
  }
}
.addbtn{
  width: 1.8rem;
  height: .56rem;
  background: #54b84c;
  color: #fff;
  text-align: center;
  line-height: .56rem;
  font-size: .24rem;
  border-radius: .08rem;
  margin: 0.3rem auto;
}
.fixedbox{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1;
  .picker{
    background: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 99999;
    .picker-items{
      font-size: .24rem;
    }
  }
}
</style>
